<template>
	<view class="trading">
			<u-navbar :title="$t('otc.name1')" placeholder @leftClick="leftClick" @rightClick="rightClick" bgColor="#3A9CFE"
				:rightText="$t('otc.name4')" leftIconColor="#fff" style="color: #fff;" titleStyle="color:#fff"></u-navbar>
		<view class="charts-box">
			<kline ref="children" :id="id"></kline>
		</view>
		<view class="top-bgc">{{$t('otc.name2')}}：{{publishPrice}}</view>
		<view class="">
			<u-sticky offset-top="0"
				style="background: #FFFFFF;border-radius: 24rpx 24rpx 0rpx 0rpx;margin-top: -50rpx;">
				<u-tabs :list="tabList1" :is-scroll="false" :current="active1" @change="onChange">
					<view slot="right" style="padding-left: 4px;margin-right: 10px;display: flex; align-items: center;">
						<u-button type="primary" @tap="handleRelease" :text="$t('otc.name3')" shape="circle" :plain="true"
							:hairline="true" size="small"></u-button>
						<view class="" style="margin-left: 30rpx;" @click="show = true">
							<u-icon name="list-dot" color="#2979ff" size="28"></u-icon>
						</view>
						<!-- <u-button style="margin-left: 30rpx;" @tap="handleOrder" type="primary" shape="circle"
							:plain="true" :hairline="true" :text="'订单'" size="small"></u-button> -->
					</view>
				</u-tabs>
			</u-sticky>
		</view>
		<scroll-view scroll-y="true" class="buy_list" @scrolltolower="scrolltolower">
			<view class="buy_item" v-for="(item,index) in buyList_t" :key="index">
				<view class="flex-between oneline">
					<view class="lt">
						{{item.nickname}}
					</view>
					<view class="rt">
						{{item.createtime}}
					</view>
				</view>
				<view class="twoline">
					<view class="">
						<text style="font-size: 24rpx;color: #999999;">{{$t('vnode.name16')}}：</text>
						<text>{{item.money}}</text>
					</view>
					<view class="threeline">
						<text>{{$t('otc.name5')}}：</text>
						<text>{{item.num}}</text>
					</view>
					<view class="threeline" v-if="active1 != 0">
						<text>{{$t('otc.name6')}}：</text>
						<text>{{item.sxf}}</text>
					</view>
				</view>
				<view class="fourline flex-between">
					<view class="lt flex">
						<text>{{$t('otc.name7')}}：</text>
						<text style="color: #333333;">{{item.min}}</text>
						<!-- <text>总额：</text>
						<text style="color: #333333;">{{item.price}}</text> -->
						<!-- <view class="flex item" v-for="i in item.pay_info">
							<view class="img">
								<image :src="$fun.imgUrl(i.image)" mode="" style="width: 100%;height: 100%;"></image>
							</view>
							<view class="">
								{{i.name}}
							</view>
						</view> -->
					</view>
					<view class="rt">
						<u-button type="primary" @tap="openPublish(active1,item)" :text="active1==0 ? $t('otc.name8'):$t('otc.name9')"
							shape="circle" size="small"></u-button>
					</view>
				</view>
				<!-- <image :src="$fun.imgUrl(item.avatar)" alt="" />
				<view class="info">
					<view class="t">{{item.mobile}} <text>{{item.createtime}}</text></view>
					<view class="m">单价：{{item.money}}</view>
					<view class="m">数量：{{item.num}}</view>
				</view>
				<view class="b" @click="configBuy(true,item)">{{active1==0?'转赠':'收赠'}}</view> -->
			</view>
			<view class="" style="height: 100rpx;">
				
			</view>
		</scroll-view>
		<!-- </mescroll-body> -->
		<!-- <u-popup :show="show" @close="closeModel()" mode="center">
			<view class="tab_box" :style="{ width: '300px',padding:'20px' }">
				<view class="prop_title">买人{{tabList[active].name}}</view>
				<u-form :model="activeItem" ref="uForm">
					<u-form-item label="单价">
						<u-input v-model="activeItem.money" />
					</u-form-item>
					<u-form-item label="数量">
						<u-input v-model="activeItem.num" />
					</u-form-item>
					<u-form-item label="总价">
						<u-input disabled v-model="activeItem.price" />
					</u-form-item>
					<u-button style="margin-top: 20rpx;" type="primary" @click="configOrder()">买入</u-button>
				</u-form>
			</view>
		</u-popup> -->
		<u-popup mode="center" :show="publish" @close="closeModel()">
			<view class="tab_box" :style="{ width: '300px',padding:'20px',borderRadius:'20px' }">
				<view class="prop_title">{{$t('otc.name10')}}{{tabList[active].name}}</view>
				<u-form ref="uForm1" labelWidth="80">
					<u-form-item :label="$t('otc.name11')">
						<u-input disabled v-model="publishMoney" :placeholder="$t('otc.name12')" />
					</u-form-item>
					<u-form-item :label="$t('otc.name5')">
						<u-input type="number" v-model="publishNum" :placeholder="$t('otc.name13')" @input="handleInput" />
					</u-form-item>
					<u-form-item :label="$t('otc.name6')" v-if="active1 != 0">
						<u-input disabled v-model="publishsxf" />
					</u-form-item>
					<u-form-item :label="$t('otc.name14')" v-else>
						<u-input disabled v-model="publishTotal" />
					</u-form-item>
					<u-form-item :label="$t('otc.name15')" v-if="active1 == 0">
						<u-radio-group v-model="radio">
							<u-radio v-for="(item, index) in payList" :key="index" :name="item.id"
								:disabled="item.disabled" style="margin: 0 10rpx;">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>
				<u-button style="margin-top: 20rpx;" type="primary" @click="configOrder()">{{$t('vnode.name19')}}</u-button>
			</view>
		</u-popup>
		<u-popup :show="show" mode="right" @close="tabclose" overlay>
			<view class="currencyPopup" style="padding: 100rpx 20rpx;width: 400rpx;">
				<view class="title">{{$t('otc.name19')}} </view>
				<view class="list flex-between">
					<view @click="handleClick(index)" :class="{item:true,'active':active == index ? true :false}"
						v-for="(item,index) in tabList" :key="item.id">
						{{item.name}}
					</view>
				</view>
			</view>
		</u-popup>
		<u-notify message="123" ref="uNotify"></u-notify>
	</view>
</template>
<script>
	import kline from './kline.vue' 
	export default {
		components:{
			kline
		},
		data() {
			return {
				notifyShow: false,
				message: '111',
				page: {
					num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量
				},
				active: 0,
				active1: 0,
				// 切换
				show: false,
				// 发布弹框状态
				publish: false,
				// 图片
				imgSrc: "",
				// tab
				tabList: [{
					name: '==',
					id: ''
				}],
				tabList1: [{
					name: this.$t('otc.name8'),
					id: 0
				}, {
					name:this.$t('otc.name9'),
					id: 1
				}],
				// 购买数据
				buyList_t: [],
				// 当前点击数据
				activeItem: '',
				publishMoney: "",
				publishNum: "",
				publishTotal: 0,
				publishsxf: 0,
				publishMin: 0,
				publishNums: 0,
				publishSxf: 0,
				publishPrice: 0,
				id: '',
				radio: '',
				payList: [],
				chartData: {},
				lineData:[],
				linepage:1,
				dataList:[],
				isupdata:0
			}
		},
		onLoad(options) {
			this.id = options.wid
			// let locale=uni.getStorageSync('language')
			// console.log(locale)
			// let localerender=''
			// if(locale=='en'){
			// 	localerender='en-US'
			// }else{
			// 	localerender='zh-CN'
			// }
			// this.localerender=localerender
			this.getTab()
		},
		onShow() {
			this.buyList()
			// this.getdata(1)
			// this.scrollLeft()
			
		},
		onReachBottom() {

		},
		onNavigationBarButtonTap() {

		},
		onReady(){
			
		},
		mounted(){
			console.log('mou')
			// this.getdata(0)
		},
		methods: {
			getdata(isupdata){
				this.$fun.ajax.post('otc/kline', {
								
				})
				.then(res => {
					if (res.code == 1) {
						let dataList = []
						this.lineData =res.data
						dataList = res.data
						dataList.map((item)=>{
							// console.log(item)
						  item.volume =item.volume?item.volume:Math.floor(Math.random() * item.high) + 1;
						  item.open = Number(item.start)
						  item.close = Number(item.end)
						  item.low = Number(item.low)
						  item.high = Number(item.high)
						  item.timestamp = this.customDateStringToTimestamp(item.date)
						  // item.turnover=Math.floor(Math.random() * item.high) + 1;
						})
						this.dataList=dataList
						this.isupdata=isupdata
						console.log('dataList',this.dataList)
					}
				});
			},
			 customDateStringToTimestamp(str) {
			  // 将日期字符串转换为时间戳
			  const [year, month, day] = str.split(/[- :]/)?str.split(/[- :]/):str.split(/[-]/);
			  return new Date(year, month - 1, day).getTime(); // 注意月份减1
			},
			handleChange(e) {
				console.log(111, e);
			},
			handleInput(val) {
				// if (+val < +this.publishMin) {
				// 	this.publishNum = 0
				// }
				if (this.active1) {
					const sxf = (this.publishSxf * this.publishNum).toFixed(2)
					this.publishsxf = sxf
				} else {
					const total = (this.publishMoney * this.publishNum).toFixed(2)
					this.publishTotal = total
				}

			},
			leftClick() {
				uni.navigateBack()
			},
			rightClick() {
				this.$fun.jump('/pageB/otcCenter/otcOrder', 0, 0)
			},
			scrolltolower() {
				this.page.num += 1
				if (this.page.num != 0) {
					this.buyList()
				}
			},
			handleClick(index) {
				// this.$fun.showLoading()
				this.$fun.jump(`/pageB/otcCenter/otcCenter?wid=${this.tabList[index].id}`, 2, 500)
				// if (this.active == index) return
				// this.active = index
				// this.show = false
				// this.page = {
				// 	num: 1,
				// 	size: 10,
				// }
				// this.buyList()
			},
			tabclose() {
				this.show = false
			},
			handletabList() {},
			// 发布
			handleRelease(type) {
				this.$fun.jump(`/pageB/otcCenter/release?wid=${this.tabList[this.active].id}&active=${this.active1}`)
			},
			// 订单
			handleOrder() {
				// this.$fun.jump('/pageB/otcCenter/otcOrder', 0, 0)
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				setTimeout(() => {
					this.refreshList();
				}, 20);
			},
			// 刷新数据
			downCallback() {
				this.buyList_t = []
				// this.mescroll.resetUpScroll(false);
			},
			//刷新列表
			refreshList() {
				this.mescroll && this.mescroll.resetUpScroll(false);
				this.isLoading = true;
			},

			onChange(e) {
				this.active1 = e.index
				this.page = {
					num: 1,
					size: 10,
				}
				this.publishNum = 0
				this.buyList()
			},
			inputChange(e, type) {
				this[type] = e.detail
			},
			getTab() {
				this.$fun.ajax.post('otc/index', {}).then(res => {
					if (res.code == 1) {
						this.tabList = res.data.list
						this.publishSxf = res.data.list[0].sxf
						this.publishPrice = res.data.list[0].price
						this.payList = res.data.pay
						const ids = this.tabList.findIndex(i => i.id == this.id)
						if (ids !== -1) {
							this.active = ids
						}
						this.id=this.tabList[0].id
						this.$nextTick(()=>{
							this.$refs.children.getid(this.id)
						})
						this.buyList()
					}
				});
			},
			closeModel() {
				this.show = false
				this.publish = false
			},
			// 订单转赠或收赠
			openPublish(type, item) {
				// if (type == 0) {
				this.publishMoney = item.money,
					this.publishMin = item.min,
					this.publishNums = item.num,
					// this.publishTotal = item.price,
					this.publishsxf = item.sxf,
					this.activeItem = item
				this.publish = true
				// } else {
				// 	this.activeItem = item
				// 	this.configOrder()
				// }
				// this.$fun.jump('/pageB/otcCenter/otcOrder', 0, 0)
			},
			// 切换弹窗
			toggle(type) {
				this[type] = !this[type];
			},
			// 发布
			pay_publish() {
				if (this.publishMoney == '') {
					this.$fun.msg(this.$t('otc.name12'))
					return
				}
				if (this.publishNum == '' || this.publishNum == 0) {
					this.$fun.msg(this.$t('otc.name13'))
					return
				}
				let prams = {
					wid: this.tabList[this.active].id,
					point: this.publishMoney,
					num: this.publishNum,
					type: this.active1 == 0 ? "user_id" : "sellid"
				}
				this.$fun.ajax.post('/otc/buyer', {
					...prams
				}).then(res => {
					this.$fun.msg(res.msg);
					if (res.code == 1) {
						this.toggle('publish')
						this.publishMoney = ""
						this.publishNum = ""
						this.buyList()
					}
					// if (res.code == 201) {
					// 	this.$fun.jump('/pageA/authentication/authentication', 0, 500)
					// }
				});
			},
			// 重置数据
			publishClose() {
				this.publishMoney = "";
				this.publishNum = ""
				this.publishTotal = ""
			},
			// 获取列表
			async buyList() {
				const that = this
				const data = {
					page: that.page.num,
					limit: that.page.size,
					wid: this.tabList[this.active].id,
					type: this.active1 == 0 ? "user_id" : "sellid",
				};
				this.$fun.showLoading()
				const res = await this.$fun.ajax.post('/otc/orderlist', {
					...data
				});
				uni.hideLoading()
				if (res.code == 1) {
					const curList = res.data;
					if (that.page.num === 1) {
						this.buyList_t = [];
						//第一页清空数据重载
						if (curList.length > 0) {
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 200
							});
						}
					}
					this.buyList_t = this.buyList_t.concat(curList); //追加新数据
					// this.mescroll.endSuccess(curList.length); //结束加载状态
					// this.noMoreSize = res.data.last_page;
				}
			},
			// 购买 弹框
			configBuy(state) {
				this.configOrder()
			},
			// 交易记录
			onClickRight() {
				this.$router.push('/tradingOrdrer')
			},
			// 切换tab
			tabChange(index, str) {
				this[str] = index;
			},
			// 确认订单
			configOrder() {
				if (this.publishNum === '' || this.publishNum === 0) {
					this.$refs.uNotify.show({
						top: 10,
						type: 'error',
						message: this.$t('otc.name13'),
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
					return
				}
				if(Number(this.publishMin)>Number(this.publishNum)){
					this.$refs.uNotify.show({
						top: 10,
						type: 'error',
						message: this.$t('otc.name22')+this.publishMin,
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
					this.publishNum = 0
					return
				}
				if (!this.radio && this.active1 == 0) {
					this.$refs.uNotify.show({
						top: 10,
						type: 'error',
						message: this.$t('otc.name16'),
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
					return 
				}
				if (+this.publishNum > +this.publishNums){
					console.log()
					this.$refs.uNotify.show({
						top: 10,
						type: 'error',
						message: this.$t('otc.name17'),
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
					 return 
				}
				this.publish = false
				// if (this.active1 == 0) {
				// 	this.configBuy(false)
				// }
				uni.showModal({
					content: this.$t('otc.name18'),
					success: (e) => {
						if (e.confirm) {
							let prams = {
								id: this.activeItem.id,
								num: this.publishNum,
								type: this.active1 == 0 ? 'user_id' : 'sellid',
								pay_id:this.active1 == 0 ? this.radio :''
							}
							this.$fun.ajax.post('/otc/sell', prams).then(res => {
								this.$fun.msg(res.msg)
								if (res.code == 1) {
									// this.downCallback()
									this.page.num = 1
									if (this.page.num != 0) {
										setTimeout(() => {
											this.buyList()
										}, 500)
									}
									this.getdata(1)
								} else if (res.code == 201) {
									// this.$fun.jump('/pageA/authentication/authentication', 0, 500)
								}
							});
						}
					}
				});
			}
		},
	}
</script>


<style lang="scss">
	.top_flex {
		width: 100%;
		background: #FFFFFF;
		position: fixed;
		// #ifdef APP-PLUS
		top: 0rpx;
		// #endif
		// #ifdef H5
		top: 88rpx;
		// #endif
		z-index: 100;
	}
	
	::v-deep .u-form-item {
		border-bottom: 1rpx solid #eaeaea;
	}
	.charts-box {
		width: 100%;
		height: auto;
		// padding-right: 30rpx;
	}
	.input_box {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;

		.input_item {
			display: flex;
			margin: 0rpx 32rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid rgb(50, 50, 51);

			.lable {
				color: rgb(50, 50, 51);
				font-size: 28rpx;
				margin-right: 40rpx;
			}

			.inputPlace {
				color: 969799;
			}
		}
	}

	.order_box {
		height: calc(100vh - 300rpx);
	}

	page {
		height: 100%;
		background: #EFF2F6;
	}

	.trading {
		height: 100%;

		.top-bgc {
			height: 130rpx;
			background-color: #3A9CFE;
			color: #fff;
			font-size: 24rpx;
			padding: 20rpx 30rpx;
		}
	}


	.img_b {
		position: fixed;
		top: 92px;
		z-index: 100;
		height: 300px;
		overflow: hidden;
	}

	.img {
		width: 100%;
		height: 494px;
	}

	.top_buy {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.buy_tab {
		padding: 10rpx 0;
		color: #000000;
		font-size: 30rpx;
		border-bottom: 5rpx solid transparent;
	}

	.a {
		color: #3c9cff;
		border-bottom: 5rpx solid #3c9cff;
	}

	.button {
		text-align: center;
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #ff0302;
		border-radius: 10rpx;
		color: white;
		font-size: 26rpx;
		margin: 0 !important;
	}

	.buy_list {
		height: calc(100% - 200rpx);
		display: flex;
		flex-direction: column;
		padding: 0 30rpx 80rpx;
		overflow: hidden;
		// #ifdef APP-PLUS
		margin-top: 20rpx;
		// #endif
		// #ifdef H5
		margin-top: 20rpx;

		// #endif
		.buy_item {
			padding: 30rpx 20rpx;
			margin: 15rpx 0;
			// display: flex;
			// align-items: center;
			// position: relative;
			// border-bottom: 2rpx solid #f3f3f3;
			// height: 221rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.oneline {
				.lt {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}

				.rt {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.twoline {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-top: 30rpx;

				text {
					font-size: 36rpx;

				}
			}

			.threeline {
				& text:nth-child(1) {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}

				& text:nth-child(2) {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					line-height: 24rpx;
				}
			}

			.fourline {
				.lt {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;

					.item {
						margin-right: 20rpx;
					}

					.img {
						width: 25rpx;
						height: 25rpx;
						margin-right: 5rpx;
					}

					// view {
					// 	margin-right: 10rpx;
					// }
				}
			}

			image {
				width: 100rpx;
				height: 100rpx;
				margin-right: 15rpx;
				// border-radius: 50%;
			}

			.info {
				.t {
					color: #333333;
					font-size: 28rpx;

					text {
						margin-left: 34rpx;
						font-size: 28rpx;
						color: #bdbdbd;
					}
				}

				.m {
					font-size: 26rpx;
					color: #666666;
					margin-top: 10rpx;
				}
			}

			.b {
				position: absolute;
				right: 30rpx;
				top: 0rpx;
				width: 130rpx;
				height: 60rpx;
				background: #3c9cff;
				border-radius: 30rpx;
				color: #ffffff;
				font-size: 26rpx;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}

	.prop_title {
		margin: 10rpx;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
		font-weight: bold;
	}

	.van-button--info {
		background: #3c9cff !important;
	}

	.van-field__body {
		.van-field__control {
			color: #3c9cff !important;
		}
	}

	.van-field__control {
		color: #3c9cff !important;
	}

	.b {
		margin: 40px 30px;

		.van-button--info {
			background: #3c9cff !important;
		}
	}

	.currencyPopup {
		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #19181A;
			line-height: 32rpx;
			margin: 20rpx 0;
		}

		.list {
			padding: 0 10rpx;
			flex-wrap: wrap;

			.item {
				padding: 10rpx 20rpx;
				border: 1rpx solid #3A9CFE;
				margin: 10rpx 20rpx;
				border-radius: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #3A9CFE;
				line-height: 40rpx;
			}

			.active {
				background-color: #3A9CFE;
				color: #ffffff;
				font-weight: 600;
			}
		}
	}
</style>